<template>
    <div class="flex flex-column align-center">
        <canvas @touchstart="touchStart" @touchend="touchEnd" id="canvas" :class="isMobile?'m_canvas':'canvas radius'" class="shadow" :style="{display:'none'}" :width="width" :height="height">
            当前浏览器不支持canvas！
        </canvas>
        <tql-pagination ref="pagination" :currentPage="pageId" :pageList="pageList" @handleCurrentChange="cutPage" :style="{display:'none'}"></tql-pagination>
    
        <div class="page-id-display">
            <div v-for="(id, index) in barcodeList" :key="index" class="page-id-item">
                读取到面料条码: {{ id }}
            </div>
            <!-- <div>123</div> -->
        </div>
    </div>

    
</template>

<script>
    import TqlCanvas from '@/tqlsdk/TqlCanvas.js';
    import { mapGetters, mapActions, mapMutations } from 'vuex';
    import TqlPagination from './tql-pagination.vue';
    import * as MethodName from '../../tqlsdk/MethodName';
    import axios from 'axios';
    export default {
        components: { TqlPagination },
        name: "TqlCanvas",
        props: {
            id: { type: String, required: true },
            width: { type: Number, required: true },
            height: { type: Number, required: true },
        },
        data() {
            return {
                //单击 x 移动像素
                clickMove: 0,
                //双击 x 移动像素
                doubleMove: [],
                pageId: 0,
                pageList: [],

                pageIdList: [], // New list to store page IDs

                dataLength : 0,
                barcodeList: [], //根据pageid去获取到barcodeList

                pageIdMap: {   // New dictionary mapping
                    1: 1000000001,
                    2: 1000000002,
                    3: 1000000003,
                    4: 1000000004,
                    5: 1000000005,
                    6: 1000000006,
                    7: 1000000007,
                    8: 1000000008,
                    9: 1000000009,
                    10: 1000000010,
                    11: 1000000011,
                    12: 1000000012
                }
            }
        },
        computed: {
            ...mapGetters(['isMobile', 'tqlCanvas', 'lineWidth', 'lineColor']),
            ...mapMutations(['setTqlCanvas'])
        },
        watch: {
            'tqlCanvas.pageId'(newVal) {
                this.pageId = newVal
            },
            'tqlCanvas.pageList'(newVal) {
                this.pageList = newVal
            }
        },
        methods: {
            ...mapActions(['chirographyListener', 'penDataListener']),
            touchStart(e) {
                const touchNumber = e.changedTouches.length
                switch (touchNumber) {
                    case 1: {
                        this.clickMove = e.changedTouches[0].pageX
                        break;
                    }
                    case 2: {
                        console.log(e);
                        break;
                    }
                }
            },
            touchEnd(e) {
                const touchNumber = e.changedTouches.length
                switch (touchNumber) {
                    case 1: {
                        const currentPageX = e.changedTouches[0].pageX
                        if (currentPageX > this.clickMove + 100) {
                            this.$refs.pagination.cutPage(true)
                        }
                        if (currentPageX < this.clickMove - 100) {
                            this.$refs.pagination.cutPage(false)
                        }
                        break;
                    }
                    case 2: {
                        console.log(e);
                        break;
                    }
                }
            },
            //接收SDK发来的数据
            receiveData(data) {
                this.tqlCanvas.handlePoint(data);

                console.log(data);
                // const currentId = this.tqlCanvas.pageId;
                // const mappedValue = this.pageIdMap[currentId];

                // console.log(currentId);
                // if (mappedValue !== undefined &&
                //     (this.pageIdList.length === 0 || this.pageIdList[this.pageIdList.length - 1] !== mappedValue)) {
                //     this.pageIdList.push(mappedValue);
                // }
            },


            // add by ridong
            async handlePenData(data) { 
                debugger;
                console.log('返回的数据为：'+data);
                if(data.operation === MethodName.OID)
                {
                    this.pageIdList.push(data.data);
                    console.log('返回的数据为：'+ this.dataLength);
                    
                    if(this.dataLength === this.pageIdList.length)
                    {
                        //需要根据读取的内容去获取到对应的barcode
                        // 接口请求配置
                        const config = {
                        url: 'https://hubdev.fish.ink/admin-api/api/puma/page',
                        method: 'post',
                        headers: {
                            'Authorization': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTQ1Nzk4ODUsInVzZXJJZCI6NzExLCJ1dWlkIjoiZjA5YTFmOWYtNDY2OS00M2E4LWI2MGItYjMzMTMyMWEyODViIiwidXNlcm5hbWUiOiJaWDE4OTU2In0.jJsDiqn2W30iS7N2-8VwTwNagGGudBfpYEXjsoJgKuk',
                            'Content-Type': 'application/json'
                        },
                        data: {
                            currentPage: 0,
                            pageSize: 10000,
                            idList: this.pageIdList // 从组件的数组中读取idList
                        }
                        };

                        debugger;
                        // 发送请求
                        const response = await axios(config);
                        
                        
                        // 检查响应状态
                        if (response.data.code === 0) {
                        // 提取list中的barcode并赋值给barcodeList
                        
                        this.barcodeList = response.data.data.list.map(item => item.barcode);
                        console.log('获取到的barcode列表:', this.barcodeList);
                        } else {
                        console.error('接口请求失败:', response.data.msg);
                        }
                    }

                }
                    

                if(data.operation === MethodName.DL)
                {
                    this.pageIdList = [];
                    this.barcodeList = [];
                }
            },

            //画笔
            draw() {
                this.tqlCanvas.draw(this.lineWidth, this.lineColor)
            },

            //清除画布
            clear() {
                this.tqlCanvas.clear()
            },

            //切页
            cutPage(pageId) {
                this.tqlCanvas.cutPage(pageId)  
            },
        },
        created() {
            //监听笔迹数据
            this.chirographyListener(this.receiveData)
            this.penDataListener(this.handlePenData)
        },
        mounted() {
            const canvas = document.getElementById('canvas')
            this.$store.commit('setTqlCanvas', new TqlCanvas(canvas))
        }
    }
</script>
<style lang="less" scoped>
    .m_canvas {
        width: 7.5rem;
        height: 10.55rem;
    }

    .canvas {
        width: 5.4rem;
        height: 7.596rem;
    }

    .page-id-display {
        margin-bottom: 1rem;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        padding: 8px;
        background-color: #f9f9f9;
        // width: 100%;
        width: 7.5rem;
        height: 10.55rem;
    }

    .page-id-item {
        padding: 4px 8px;
        font-size: 14px;
        color: #333;
    }
</style>